Ovladavanje orijentacijom zaslona: Sveobuhvatan vodič za rukovanje rotacijom uređaja

U današnjem svijetu s više uređaja, elegantno rukovanje orijentacijom zaslona ključno je za pružanje pozitivnog korisničkog iskustva. Bilo da se radi o pametnom telefonu, tabletu ili čak sklopivom uređaju, korisnici očekuju da se aplikacije neprimjetno prilagode kada rotiraju svoj uređaj. Ovaj vodič pruža sveobuhvatan pregled rukovanja rotacijom uređaja, pokrivajući različite platforme i tehnike kako bi vaše aplikacije bile responzivne i jednostavne za korištenje.

Razumijevanje orijentacije zaslona

Orijentacija zaslona odnosi se na smjer u kojem se sadržaj prikazuje na zaslonu uređaja. Dvije primarne orijentacije su:

• Portret (uspravno): Zaslon je viši nego što je širok. Ovo je tipična orijentacija za pametne telefone.
• Pejzaž (vodoravno): Zaslon je širi nego što je visok. Ovo se često preferira za gledanje videozapisa ili igranje igara.

Neki uređaji i aplikacije također podržavaju:

• Obrnuti portret: Portretna orijentacija s uređajem zarotiranim za 180 stupnjeva.
• Obrnuti pejzaž: Pejzažna orijentacija s uređajem zarotiranim za 180 stupnjeva.

Zašto rukovati promjenama orijentacije zaslona?

Neuspješno rukovanje promjenama orijentacije zaslona može dovesti do raznih problema, uključujući:

• Problemi s rasporedom (layout): Elementi mogu biti neusklađeni, odrezani ili se preklapati.
• Gubitak podataka: U nekim slučajevima, stanje aktivnosti ili aplikacije može se izgubiti prilikom rotacije zaslona.
• Loše korisničko iskustvo: Neugodno ili neispravno iskustvo može frustrirati korisnike i naštetiti reputaciji vaše aplikacije.
• Problemi s performansama: Učestalo ponovno iscrtavanje i izračuni rasporeda mogu utjecati na performanse, posebno na starijim uređajima.

Rukovanje orijentacijom zaslona na različitim platformama

Specifične tehnike za rukovanje orijentacijom zaslona razlikuju se ovisno o platformi za koju razvijate. Pogledajmo neke od najpopularnijih platformi:

1. Android

Android pruža nekoliko mehanizama za rukovanje promjenama orijentacije zaslona. Najčešći pristupi uključuju:

a. Promjene konfiguracije (Configuration Changes)

Prema zadanim postavkama, Android ponovno stvara aktivnost (Activity) kada se promijeni orijentacija zaslona. To znači da se metoda `onCreate()` ponovno poziva, a cijeli se raspored ponovno učitava. Iako ovo može biti korisno za potpunu restrukturiranje korisničkog sučelja na temelju orijentacije, može biti i neučinkovito ako trebate samo malo prilagoditi raspored.

Da biste spriječili ponovno stvaranje aktivnosti, možete deklarirati da vaša aktivnost rukuje promjenom konfiguracije `orientation` u datoteci `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Dodavanjem `orientation` i `screenSize` (važno za API razinu 13 i višu), govorite sustavu da će vaša aktivnost sama rukovati promjenama orijentacije. Kada se zaslon rotira, pozvat će se metoda `onConfigurationChanged()`.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Check the orientation of the screen
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "landscape", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrait", Toast.LENGTH_SHORT).show();
 }
}

Unutar `onConfigurationChanged()`, možete ažurirati korisničko sučelje na temelju nove orijentacije. Ovaj je pristup učinkovitiji od ponovnog stvaranja aktivnosti jer izbjegava nepotrebno učitavanje resursa i inflaciju rasporeda.

b. Spremanje i vraćanje stanja aktivnosti

Čak i ako sami rukujete promjenom konfiguracije, možda ćete i dalje trebati spremiti i vratiti stanje aktivnosti. Na primjer, ako vaša aktivnost ima tekstualno polje, htjet ćete sačuvati tekst koji je korisnik unio prilikom rotacije zaslona.

Možete koristiti metodu `onSaveInstanceState()` za spremanje stanja aktivnosti i metodu `onRestoreInstanceState()` za njegovo vraćanje.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternativno, možete koristiti ViewModels sa SavedStateHandleom za upravljanje i očuvanje podataka vezanih uz korisničko sučelje kroz promjene konfiguracije, što je moderniji i preporučeni pristup.

c. Alternativni rasporedi (Layouts)

Android vam omogućuje da pružite različite datoteke rasporeda za različite orijentacije zaslona. Možete stvoriti zasebne datoteke rasporeda u direktorijima `res/layout-land/` i `res/layout-port/`. Kada se zaslon rotira, Android će automatski učitati odgovarajuću datoteku rasporeda.

Ovaj pristup je koristan kada korisničko sučelje treba biti značajno drugačije u pejzažnoj i portretnoj orijentaciji. Na primjer, možda želite prikazati raspored s dva okna u pejzažnom načinu i raspored s jednim oknom u portretnom.

d. Korištenje ConstraintLayouta

ConstraintLayout je moćan upravitelj rasporeda koji vam omogućuje stvaranje fleksibilnih i prilagodljivih rasporeda. S ConstraintLayoutom možete definirati ograničenja (constraints) koja specificiraju kako bi se prikazi (views) trebali pozicionirati u odnosu jedni na druge i na roditeljski raspored. To olakšava stvaranje rasporeda koji se prilagođavaju različitim veličinama i orijentacijama zaslona.

2. iOS

iOS također pruža mehanizme za rukovanje promjenama orijentacije zaslona. Evo nekih uobičajenih pristupa:

a. Auto Layout

Auto Layout je sustav rasporeda temeljen na ograničenjima (constraint-based) koji vam omogućuje definiranje pravila o tome kako bi se prikazi trebali pozicionirati i dimenzionirati. Ograničenja Auto Layouta osiguravaju da se vaše korisničko sučelje prilagođava različitim veličinama i orijentacijama zaslona.

Kada koristite Auto Layout, obično definirate ograničenja koja specificiraju odnose između prikaza. Na primjer, možete ograničiti gumb da bude centriran horizontalno i vertikalno unutar svog roditeljskog prikaza. Kada se zaslon rotira, mehanizam Auto Layouta automatski preračunava položaje i veličine prikaza kako bi zadovoljio ograničenja.

b. Klase veličina (Size Classes)

Klase veličina su način kategorizacije veličina i orijentacija zaslona. iOS definira dvije klase veličina: `Compact` i `Regular`. Uređaj može imati različite klase veličina za svoju širinu i visinu. Na primjer, iPhone u portretnoj orijentaciji ima klasu veličine `Compact` za širinu i `Regular` za visinu. U pejzažnoj orijentaciji često ima `Compact` visinu i `Compact` ili `Regular` širinu ovisno o modelu.

Možete koristiti klase veličina za prilagodbu korisničkog sučelja na temelju veličine i orijentacije zaslona. Na primjer, možda želite prikazati drugačiji skup prikaza ili koristiti različite fontove za različite klase veličina.

Možete konfigurirati različita ograničenja, pa čak i instalirati/deinstalirati prikaze na temelju klasa veličina izravno u Interface Builderu ili programski.

c. Metode rotacije View Controllera

iOS pruža nekoliko metoda u klasi UIViewController koje se pozivaju prilikom rotacije uređaja:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Poziva se prije nego što se prikaz view controllera promijeni za prijelaz.
• viewWillLayoutSubviews(): Poziva se neposredno prije nego što prikaz view controllera rasporedi svoje pod-prikaze.
• viewDidLayoutSubviews(): Poziva se neposredno nakon što prikaz view controllera rasporedi svoje pod-prikaze.

Možete nadjačati (override) ove metode kako biste izvršili prilagođene prilagodbe rasporeda prilikom rotacije zaslona.

d. Notification Center

Možete osluškivati obavijesti o promjeni orijentacije koristeći Notification Center:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Landscape")
 } else {
 print("Portrait")
 }
}

3. Web razvoj (HTML, CSS, JavaScript)

U web razvoju, možete koristiti CSS medijske upite i JavaScript za rukovanje promjenama orijentacije zaslona.

a. CSS medijski upiti (Media Queries)

Medijski upiti omogućuju vam primjenu različitih stilova na temelju veličine zaslona, orijentacije i drugih karakteristika. Možete koristiti medijsku značajku `orientation` za ciljanje određenih orijentacija.

/* Portretna orijentacija */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Pejzažna orijentacija */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Možete koristiti medijske upite za prilagodbu rasporeda, fontova i drugih stilova na temelju orijentacije.

b. JavaScript

Možete koristiti JavaScript za otkrivanje promjena orijentacije zaslona i izvršavanje prilagođenih radnji. `screen.orientation` API pruža informacije o trenutnoj orijentaciji.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Landscape");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrait");
 } else {
 console.log("Unknown orientation");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternativno, možete koristiti `matchMedia` API s medijskim upitima:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Landscape");
 } else {
 console.log("Portrait");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript se može koristiti za dinamičko prilagođavanje rasporeda, učitavanje različitih resursa ili obavljanje drugih radnji na temelju orijentacije.

c. Okviri za responzivni dizajn

Okviri poput Bootstrapa, Foundationa i Materialize CSS-a pružaju ugrađenu podršku za responzivni dizajn, olakšavajući stvaranje rasporeda koji se prilagođavaju različitim veličinama i orijentacijama zaslona. Ovi okviri obično koriste sustav rešetki (grid system) i medijske upite za stvaranje fleksibilnih i responzivnih korisničkih sučelja.

Najbolje prakse za rukovanje orijentacijom zaslona

Evo nekoliko najboljih praksi koje treba imati na umu prilikom rukovanja promjenama orijentacije zaslona:

• Izbjegavajte nepotrebno ponovno stvaranje Activityja/ViewControllera: Ako je moguće, sami rukujte promjenom konfiguracije kako biste izbjegli opterećenje ponovnog stvaranja Activityja ili ViewControllera.
• Spremajte i vraćajte stanje: Uvijek spremajte i vraćajte stanje Activityja/ViewControllera kako biste spriječili gubitak podataka. Koristite ViewModels za robusnije upravljanje stanjem.
• Koristite Auto Layout ili ConstraintLayout: Ovi sustavi rasporeda olakšavaju stvaranje fleksibilnih i prilagodljivih rasporeda.
• Testirajte na više uređaja: Testirajte svoju aplikaciju na raznim uređajima s različitim veličinama i orijentacijama zaslona kako biste osigurali da ispravno radi.
• Uzmite u obzir pristupačnost: Osigurajte da vaša aplikacija ostane pristupačna korisnicima s invaliditetom prilikom rotacije zaslona.
• Pružite jasne vizualne naznake: Ako se korisničko sučelje značajno mijenja prilikom rotacije zaslona, pružite jasne vizualne naznake kako bi korisnici razumjeli promjene.
• Izbjegavajte nametanje određene orijentacije (osim ako je nužno): Dopustite korisnicima da koriste svoj uređaj u željenoj orijentaciji kad god je to moguće. Nametanje orijentacije može biti frustrirajuće i nezgodno. Zaključajte orijentaciju samo ako je to ključno za funkcionalnost aplikacije (npr. igra koja zahtijeva pejzažni način rada). Ako zaključate orijentaciju, jasno komunicirajte razlog korisniku.
• Optimizirajte za performanse: Smanjite količinu posla koji se mora obaviti prilikom rotacije zaslona kako biste izbjegli probleme s performansama.
• Koristite relativne jedinice: Prilikom definiranja veličina i položaja u svom rasporedu, koristite relativne jedinice (npr. postotke, `dp`, `sp`) umjesto apsolutnih jedinica (npr. piksela) kako biste osigurali da se vaše korisničko sučelje pravilno skalira na različitim veličinama zaslona.
• Iskoristite postojeće biblioteke i okvire: Iskoristite prednosti postojećih biblioteka i okvira koji pružaju podršku za responzivni dizajn i rukovanje orijentacijom zaslona.

Zaključavanje orijentacije i korisničko iskustvo

Iako je općenito najbolje dopustiti korisnicima da slobodno rotiraju svoje uređaje, postoje situacije u kojima biste mogli htjeti zaključati orijentaciju zaslona. Na primjer, video player preko cijelog zaslona mogao bi zaključati orijentaciju na pejzažni način rada za optimalno gledanje.

Međutim, važno je štedljivo koristiti zaključavanje orijentacije i pružiti jasan razlog korisniku. Nametanje orijentacije može biti frustrirajuće i može učiniti vašu aplikaciju manje pristupačnom.

Kako zaključati orijentaciju zaslona

Android

Možete zaključati orijentaciju zaslona u Androidu postavljanjem atributa `screenOrientation` u datoteci `AndroidManifest.xml`:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Također možete zaključati orijentaciju programski:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

U iOS-u možete specificirati podržane orijentacije u datoteci `Info.plist`. Također možete nadjačati metodu `supportedInterfaceOrientations` u svom view controlleru:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globalna razmatranja

Prilikom dizajniranja za globalnu publiku, imajte na umu sljedeće u vezi s orijentacijom zaslona:

• Rasporedi zdesna nalijevo (RTL): Razmislite kako će se vaše korisničko sučelje prilagoditi RTL jezicima. Neki jezici, poput arapskog i hebrejskog, pišu se zdesna nalijevo. Osigurajte da se vaš raspored pravilno zrcali u RTL načinu rada. Auto Layout i ConstraintLayout često pružaju ugrađenu podršku za RTL rasporede.
• Kulturne preferencije: Budite svjesni kulturnih preferencija vezanih uz upotrebu uređaja. Iako je većina korisnika navikla na portretni i pejzažni način rada, neke kulture mogu imati suptilne preferencije. Testiranje s korisnicima iz različitih regija može pružiti vrijedne uvide.
• Pristupačnost za različite korisnike: Uvijek dajte prioritet pristupačnosti. Osigurajte da je vaša aplikacija upotrebljiva za osobe s invaliditetom, bez obzira na orijentaciju zaslona. To uključuje pružanje alternativnog teksta za slike, osiguravanje dovoljnog kontrasta boja i podršku za pomoćne tehnologije.

Testiranje rukovanja orijentacijom zaslona

Temeljito testiranje je ključno kako bi se osiguralo da vaša aplikacija ispravno rukuje promjenama orijentacije zaslona. Evo nekoliko savjeta za testiranje:

• Koristite emulatore i stvarne uređaje: Testirajte svoju aplikaciju i na emulatorima i na stvarnim uređajima kako biste pokrili širi raspon veličina zaslona i hardverskih konfiguracija.
• Testirajte u različitim orijentacijama: Testirajte svoju aplikaciju u portretnoj i pejzažnoj orijentaciji, kao i u obrnutoj portretnoj i obrnutoj pejzažnoj ako su podržane.
• Testirajte s različitim veličinama zaslona: Testirajte svoju aplikaciju na uređajima s različitim veličinama zaslona kako biste osigurali da se korisničko sučelje pravilno skalira.
• Testirajte s različitim veličinama fonta: Testirajte svoju aplikaciju s različitim veličinama fonta kako biste osigurali da tekst ostane čitljiv.
• Testirajte s omogućenim značajkama pristupačnosti: Testirajte svoju aplikaciju s omogućenim značajkama pristupačnosti, poput čitača zaslona, kako biste osigurali da ostane pristupačna korisnicima s invaliditetom.
• Automatizirano testiranje: Implementirajte automatizirane UI testove koji pokrivaju promjene orijentacije zaslona. To može pomoći u hvatanju regresija i osiguravanju dosljednog ponašanja kroz izdanja.

Zaključak

Učinkovito rukovanje orijentacijom zaslona ključan je aspekt mobilnog i web razvoja. Razumijevanjem različitih tehnika dostupnih na svakoj platformi i pridržavanjem najboljih praksi, možete stvoriti aplikacije koje pružaju besprijekorno i ugodno korisničko iskustvo, bez obzira na to kako korisnik drži svoj uređaj. Ne zaboravite dati prioritet testiranju i uzeti u obzir globalne implikacije vaših dizajnerskih odluka kako biste osigurali da je vaša aplikacija pristupačna i jednostavna za korištenje raznolikoj publici.